<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>银行理财</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script src="../../build/public/base.js" charset="utf-8"></script>
</head>
<body>
	<div id="container" style="padding-bottom:50px;padding-top:10px;">
		<!-- 搜索 -->
		<div class="search-wrap">
			<input class="search-top" :class="{active:inputFocus}" v-model="inputValue" type="search" @keyup.enter="searchList">
			<p :class="{active:inputFocus}"><span class="iconfont">&#xe601;</span>{{inputText}}</p>
			<button type="button" v-if="inputFocus" @click="searchCancel">取消</button>
			<div class="search-bac" v-if="inputFocus">
				<div class="history-list-wrap">
					<p><span class="iconfont">&#xe627;</span>历史搜索</p>
					<ul>
						<li class="history-list" v-for="item in historyList">
							<i  @click="hisSearch(item.keywords)">{{item.keywords}}</i><span class="iconfont" @click="delKeyWords(item.idStr)">&#xe624;</span>
						</li>
					</ul>
					<a v-if="historyList.length>0" @click="delAllKeyWords">清空搜索记录</a>
				</div>
			</div>
		</div>
		<!--产品列表-->
		<my-top></my-top>
		<!--筛选条件-->
		<div class="filter" :class="{active:showFilter}">
			<ul class="clear-fix">
				<li @click="sort(1)" class="active">综合</li>
				<li @click="sort(2)">收益<span class="iconfont">&#xe61a</span></li>
				<li @click="sort(3)">期限<span class="iconfont">&#xe61a</span></li>
				<li @click="filterFuc">筛选<span class="iconfont">&#xe61b</span></li>
			</ul>
		</div>
		<div class="filter-area" >
			<dl class="filter-area-input">
				<dt>银行</dt>
				<dd>
					<input v-model="bankName" type="text" placeholder="请输入银行名称">
				</dd>
			</dl>
			<dl v-for="(item,indexMain) in filter">
				<dt>{{item.title}}</dt>
				<dd class="clear-fix">
					<span
						v-for="(i,index) in item.con"
						v-bind:title="i.val"
						v-bind:class="{active:i.active}"
						v-on:click="filterItem(indexMain,index)">
						{{i.text}}
					</span>
				</dd>
			</dl>
			<div class="filter-area-btn">
				<button @click="filterFuc">取消</button>
				<button @click="filterBtn" class="insure-btn">确定</button>
			</div>
		</div>
		<!--列表-->
		<div class="pro-recom refresh">
			<div class="pro-recom-list" v-for="item in proList">
				<a :href="url | formatUrl(item.idStr)">
					<div class="pro-recom-list-title">
						<b>{{item.name}}</b><span>{{item.issuer}}</span>
					</div>
					<div class="pro-recom-list-con">
						<ul class="clear-fix">
							<li class="pro-recom-main">
								<span><b>{{item.apr | formatNum('','%')}}</b></span>
								<i>预期收益率</i>
							</li>
							<li class="pro-recom-vice">
								<!--<span>{{item.investmentTermShow | formatNum('','')}}</span>-->
								<span v-if="item.investmentTerm == 0">--</span>
								<span v-else>{{item.investmentTerm}} {{item.investmentTermUnit | formatUnit}}</span>
								<i>投资期限</i>
							</li>
							<li class="pro-recom-vice">
								<span>{{(item.minimumInvestment/10000).toFixed(0)}}万元起</span>
								<i>起投金额</i>
							</li>
						</ul>
					</div>
				</a>
			</div>
		</div>
		<!--底栏-->
		<my-footer></my-footer>
		<div class="empetDate">
			<span class="iconfont">&#xe602;</span>
			抱歉！没找到更多数据
		</div>
	</div>
<script src="../../build/js/jquery.min.js"></script>
<script src="../../build/js/template.js"></script>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
	el:"#container",
	data:{
		url:'product_2_detail.html',
		page:1,												//页码
		bankName:'',                 	//银行名称
		currency:'',									//币种
		saleStatus:'',								//销售状态
		financialType:'',							//收益类型
		financialSort:'',							//银行理财排序
		filter:[											//筛选项目
			{
			title:'币种',
			con:[
				{val:'RMB',text:'人民币',active:false},
				{val:'DOLLAR',text:'美元',active:false},
				{val:'HKD',text:'港币',active:false},
				{val:'Euro',text:'欧元',active:false},
				{val:'AUD',text:'澳元',active:false},
				{val:'GBP',text:'英镑',active:false},
				{val:'OTHERS',text:'其他外币',active:false}]
			},{
			title:'收益类型',
			con:[
				{val:'GUARANTEED_BANK_FINANCE',text:'保本固定',active:false},
				{val:'GUARANTEED_FLOATING',text:'保本浮动',active:false},
				{val:'NON_GUARANTEED_BANK_FINANCE',text:'非保本',active:false}]
			},{
			title:'发售状态',
			con:[
				{val:'SELLING',text:'在售中',active:false},
				{val:'EXPIRED',text:'已到期',active:false},]
//				{val:'EXPIRING',text:'即将到期',active:false},]
			},
		],
		showFilter:false,
		proList:[],
		pageCount:'',
		inputText:'大家都在搜：银行理财',
		inputValue:'',
		inputFocus:false,
		historyList:[],
	},
	mounted:function(){
		this.$nextTick(function(){
			this.getListData();
			refresh(this.refreshData());    //监听滚动到底部->触发refreshData()
			vm.init();                      //搜索初始化
		})
	},
	methods:{
		getListData:function(callback){										//获取列表数据
			loader.init();                                  //显示加载图标
			var $this = this;
			var url = "/product/bank-financial-product/list"//银行理财列表
			get(url,{
				currentPage:vm.page,													//页码
				bank:vm.bankName,															//银行名称筛选
				currency:vm.currency, 												//币种
				saleStatus:vm.saleStatus,											//销售状态
				financialType:vm.financialType,								//收益类型
				financialSort:vm.financialSort,								//银行理财排序
			},function(res){
				vm.pageCount = res.data.totalCount/res.data.pageSize;
				vm.proList = vm.proList.concat(res.data.resultList);  //数据合并渲染
				if(res.data.resultList.length == 0){          //没请求到数据，判断为到底部
					refreshText('到底了哦！')
				}else{
					refreshText('上拉加载更多数据')
				}
				if(vm.proList.length == 0){                   //总数据为空，判断为没有产品数据
					document.querySelector('.empetDate').style.display = 'block';
					refreshText('')
				}else{
					document.querySelector('.empetDate').style.display = 'none';
				}
				if(vm.proList.length <5){                     //当次请求数据小于5,判断为没有下一页数据
					refreshText('')
				}
				loader.remove();
			})
		},
		refreshData:function(){           //触发上拉加载后的回调
			return function(){
				if(vm.page > vm.pageCount){
					refreshText('到底了哦！')
				}else {
					vm.page++;
					vm.getListData();
				}
			}
		},
		//筛选显示隐藏
		filterFuc:function(){
			var filterArea = document.querySelector('.filter-area');
			if(filterArea.classList.contains('active')){
				filterArea.classList.remove('active');
				filterArea.style.height = 0;
				this.showFilter = false;
				document.body.style.overflow = 'initial';
				this.mask(-1);
			}else {
				filterArea.classList.add('active');
				filterArea.style.height = filterArea.scrollHeight + 'px';
				this.showFilter = true;
				document.body.style.overflow = 'hidden';
				this.mask(1);
			}
		},
		//筛选项目
		filterItem:function(indexMain,index){
			this.filter[indexMain].con[index].active = !this.filter[indexMain].con[index].active
			//alert(indexMain+' '+index)
		},
		//确定筛选
		filterBtn:function(){
			vm.currency = [];
			vm.financialType = [];
			vm.saleStatus = [];
			vm.proList = [];
			for(var i=0;i<vm.filter.length;i++){
				for(var j=0;j<vm.filter[i].con.length;j++){
					if(vm.filter[i].con[j].active){
						if(i == 0){
							vm.currency.push(vm.filter[i].con[j].val)
						}else if(i == 1){
							vm.financialType.push(vm.filter[i].con[j].val)
						}else if(i == 2){
							vm.saleStatus.push(vm.filter[i].con[j].val)
						}
					}
				}
			}
			vm.currency = vm.currency.join(',')
			vm.financialType = vm.financialType.join(',')
			vm.saleStatus = vm.saleStatus.join(',')
			vm.page = 1;
			vm.getListData();
			vm.bankName = '';
			this.filterFuc();
		},
		sort:function(item){    //排序
			vm.proList = [];

			var list = document.querySelectorAll('.filter li');
			for(var i=0;i<list.length;i++){
				list[i].classList.remove('active');
			}
			if(item == 1){
				vm.financialSort = 'COMPOSITE';
				list[0].classList.add('active');
			}else if(item == 2){
				if(vm.financialSort == 'EARNINGS_DESC'){
					vm.financialSort = 'EARNINGS_ASC';
					list[1].classList.add('asc');
				}else{
					vm.financialSort = 'EARNINGS_DESC';
					list[1].classList.remove('asc');
				}
				list[1].classList.add('active');
			}else if(item == 3){
				if(vm.financialSort == 'TERM_DESC'){
					vm.financialSort = 'TERM_ASC';
					list[2].classList.add('asc');
				}else{
					vm.financialSort = 'TERM_DESC';
					list[2].classList.remove('asc');
				}
				list[2].classList.add('active');
			}
			vm.getListData();
		},
		init:function(){        //搜索框监听
			var searchWrap = document.querySelector('.search-wrap');
			var searchInput = document.querySelector('.search-top');
			var footer = document.querySelector('.footer')
			searchInput.onfocus = function(){
				vm.inputFocus = true;
				vm.inputText = '';
				vm.showKeyWords();
				footer.style.display = 'none';
				searchWrap.style.cssText = 'position:fixed;top:10px;'
			}
			searchInput.onblur = function(){

			}
		},
		searchCancel:function(){       //取消搜索
			var footer = document.querySelector('.footer');
			var searchWrap = document.querySelector('.search-wrap');
			vm.inputFocus = false;
			vm.inputText = '大家都在搜：银行理财';
			vm.inputValue = '';
			footer.style.display = 'block';
			searchWrap.style.cssText = 'position:relative;'
		},
		showKeyWords:function(){      //请求搜索关键字
			noParamsGet('/advisor/home/keywords-history',function(res){
				vm.historyList = res.data.slice(0,10);
			})
		},
		delKeyWords:function(idStr){  //删除单个搜索记录
			post('/advisor/home/keywords-history/remove',{
				keywordsHistoryIdStr:idStr
			},function(res){
				vm.showKeyWords();
				toast('已删除')
			})
		},
		delAllKeyWords:function(){    //删除全部搜索记录
			noParamsPost('/advisor/home/keywords-history/clear',function(res){
				vm.showKeyWords();
				toast('已清空')
			})
		},
		searchList:function(){        //发送搜索关键字到搜索页面
			console.log(vm.inputValue);
			if(vm.inputValue == ''){
				toast('请输入搜索条件');
				return
			}
			window.location.href = 'search.html?keyWord='+vm.inputValue;
		},
		hisSearch:function(keywords){ //点击关键字发送请求到搜索页
			vm.inputValue = keywords;
			window.location.href = 'search.html?keyWord='+vm.inputValue;
		}
	},
	filters:{
		formatUrl:function(url,idStr){
			return url+'?idStr='+idStr;
		}
	}
})
</script>

</body>
</html>
